<template>
<!--三级联动的全局组件-->
  <div>
    <el-form :inline="true" :model="selectCategoryId"  class="demo-form-inline">
<!--      一级分类-->
      <el-form-item label="一级分类">
        <el-select
          v-model="selectCategoryId.category1Id"
          placeholder="请选择"
          @change="getCategory2List"
        >
          <el-option
            v-for="category1 in category1List"
            :key="category1.id"
            :label="category1.name"
            :value="category1.id"
          ></el-option>
        </el-select>
      </el-form-item>
<!--      二级分类-->
      <el-form-item label="二级分类">
        <el-select
          v-model="selectCategoryId.category2Id"
          placeholder="请选择"
          @change="getCategory3List"
        >
          <el-option
            v-for="category2 in category2List"
            :key="category2.id"
            :label="category2.name"
            :value="category2.id"
          ></el-option>
        </el-select>
      </el-form-item>
<!--      三级分类-->
      <el-form-item label="三级分类">
        <el-select
          v-model="selectCategoryId.category3Id"
          placeholder="请选择"
          @change="sendCategory1Id2Id3Id"
        >
          <el-option
            v-for="category3 in category3List"
            :key="category3.id"
            :label="category3.name"
            :value="category3.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "CategorySelector",
  data() {
    return {
      // 一级分类
      category1List: [],
      // 二级分类
      category2List: [],
      // 三级分类
      category3List: [],
      // 存放选中id的对象
      selectCategoryId: {
        category1Id:'',
        category2Id:'',
        category3Id:''
      }
    }
  },
  methods:{
    // 获取一级分类
    async getCategory1List() {

      let res = await this.$API.attr.apiGetCategory1()
      if (res.code === 200) {
        this.category1List = res.data
      }else {
        this.$message.error('获取数据失败')
      }
    },
    // 获取二级分类
    async getCategory2List(category1Id) {
      // 清空二、三级分类的值
      this.category3List = []
      this.category2List = []
      this.selectCategoryId.category2Id = ''
      this.selectCategoryId.category3Id = ''
      let res = await this.$API.attr.apiGetCategory2(category1Id)
      if(res.code === 200) {
        this.category2List = res.data
      }else {
        this.$message.error('获取数据失败')
      }
      // 给父组件发送 1Id, 2Id, 3Id
      this.$emit('getCategoryAllId', this.selectCategoryId)
    },
    // 获取三级分类
    async getCategory3List(category2Id){
      // 清空三级分类的值
      this.category3List = []
      this.selectCategoryId.category3Id = ''
      let res = await this.$API.attr.apiGetCategory3(category2Id)
      if(res.code === 200) {
        this.category3List = res.data
      }else {
        this.$message.error('获取数据失败')
      }
      // 给父组件发送 1Id, 2Id, 3Id
      this.$emit('getCategoryAllId', this.selectCategoryId)
    },
    // 给父组件发送 分类的1Id，2Id,3Id
    sendCategory1Id2Id3Id() {
      this.$emit('getCategoryAllId', this.selectCategoryId)
    }
  },
  mounted(){
    // 刚一挂载就获取一级分类
    this.getCategory1List()
  }
}
</script>

<style scoped>
span {
  font-weight: 700;
  margin: 0 10px;
}
</style>
